<template>
  <el-form label-width="110px" style="margin-top: 30px">
    <el-form-item label="机构名称:" :required="true">
      <el-input
        v-model="form.name"
        style="width: 220px"
        maxlength="20"
        show-word-limit
        class="input"
        placeholder="请输入名称"
      />
    </el-form-item>
    <el-form-item label="二级域名:" :required="true">
      <el-input
        v-model="form.domain"
        style="width: 220px"
        maxlength="20"
        show-word-limit
        class="input"
        placeholder="请输入名称"
      />
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">后台图标:<br>(32 X 32)</span>
      <uploader
        :width="64"
        :height="64"
        :oss="'orgInfo'"
        :url="form.icon"
        @callback="iconCallback"
      />
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">平台图标:<br>(220 X 45)</span>
      <uploader
        :width="220"
        :height="45"
        :oss="'orgInfo'"
        :url="form.logo"
        @callback="logoCallback"
      />
    </el-form-item>
    <el-form-item label="到期时间:" :required="true">
      <el-date-picker
        v-model="form.expiration"
        :picker-options="options"
        type="date"
        placeholder="选择日期"
      />
      <div style="margin-top: 10px">
        <el-tag type="success" style="width: 110px">
          剩余 {{ Math.ceil((new Date(form.expiration).getTime() - Date.now()) /(24 * 3600 * 1000)) }} 天
        </el-tag>
      </div>
    </el-form-item>
    <el-form-item label="管理密码:" :required="true">
      <el-input
        v-model="form.password"
        style="width: 220px"
        class="input"
        maxlength="12"
        show-word-limit
        placeholder="输入密码"
      />
      <el-button @click="resetPwd">随机</el-button>
    </el-form-item>
    <el-form-item>
      <el-button style="width: 220px" type="primary" @click="create">创建</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Uploader from '../course/module/Upload'
import { createOrg } from '../../api/org'
export default {
  name: 'OrgCreate',
  components: { Uploader },
  data() {
    return {
      checked: false,
      model: 'add',
      form: {
        name: '',
        domain: '',
        logo: '',
        icon: '',
        account: '',
        password: '',
        expiration: Date.now()
      },
      options: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  methods: {
    resetPwd() {
      this.form.password = Math.random().toString().slice(-6)
    },
    iconCallback(url) {
      this.form.icon = url
    },
    logoCallback(url) {
      this.form.logo = url
    },
    create() {
      createOrg(this.form).then(() => {
        this.$SUCCESS('机构创建成功')
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>

</style>
